<template>
    <div id="product">
        <el-row>
            <el-col :span="6"  v-for="(o, index) in products" :key="o.id" :offset="index > 0 ? 1 : 0">
                <el-card  shadow="hover" :body-style="[{ padding: '0px' }]">
                  <img style='cursor: pointer;' :src="o.image" class="image" @click="todetail(o)">
                  <div style="padding: 14px;">
                      <span style='cursor: pointer;' @click="todetail(o)">{{o.productName}}</span>
                      <div class="bottom clearfix">
                        <el-tag type="danger" effect="plain">当前价格：<span>{{o.basePrice}}</span></el-tag><br/>
                        <el-tag type="danger">开始时间：<time class="time" >{{o.starttime}}</time></el-tag>
                        <el-tag type="danger">结束时间：<time class="time" >{{o.deadline}}</time></el-tag>
                        <el-tag class="el-icon-user-solid" type="info">围观人数：<span>{{o.hot}}</span></el-tag>
                        <el-tag style="margin-left:20px" type="success"><span>{{o.mode}}</span></el-tag>
                        <el-tag  effect="dark" type="warning"><span>{{o.status=='SELL'?'正在拍卖':o.status=='SELL_OUT'?'已拍卖':o.status=='DOWN'?'下架':'流拍'}}</span></el-tag>
                      </div>
                  </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>

<script>

export default {
    name: 'product',
    components:{
    },
    props: {
        products:Array
    },
    data() {
        return {
        };
    },
     
    methods:{
      todetail(obj){
        obj.uid = sessionStorage.getItem("uid");
        this.$ax.put('/epai/product-record/addhot',obj).then((response)=>{
                 console.log("hot+1");
            }).catch(error => {
                console.error(error);
            });
        this.$router.push({  //核心语句
            path:'/detail',   //跳转的路径
            query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                obj:obj ,
            }
        })
      }
    },

    
}
</script>